<template>
	<view>
		<view class="top-banner">

		</view>
		<view class="news-box">
			<view class="news flex-row flex-y-center flex-list">
				<view class="notice-img">
					<image src="/static/images/gg.png"></image>
				</view>
				<view class="swiper-box">
					<swiper :autoplay="true" :interval="2000" vertical>
						<swiper-item :key="item.id" v-for="item in newsList">
							<view style="height: 100%" class="flex-y-center">
								<view class="flex-y-center flex-list">
									<view class="news-title line1">{{ item.swiper_title }}</view>
								</view>

							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="arrow-right">
					<svg width="23" height="42" viewBox="0 0 23 42" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M2.25 2.25L21 21L2.25 39.75" stroke="currentColor" stroke-width="3" stroke-linecap="round"
							stroke-linejoin="round" />
					</svg>
				</view>
			</view>
		</view>
		<view class="jifen-title-row flex-list flex-y-center">
			<view class="title">积分当钱花</view>
			<view class="jf_huishou">
				<view class="icon">
					<image src="/static/images/prompt.png"></image>
				</view>
				<view class="text">积分回收</view>
			</view>
		</view>

		<view class="product-list">
			<JiFenGoodsListItem :key="item.id" v-for="item in goodsList" :item="item"></JiFenGoodsListItem>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onBeforeMount,
		onMounted,
		ref
	} from 'vue';
	import {
		swiperData
	} from '../../testData/goods/swiperData';
	import {
		goodsListData
	} from '../../testData/goods/goodsListData';

	const newsList = ref([])
	const goodsList = ref([]);
	onMounted(() => {
		newsList.value = swiperData.data;
		goodsList.value = goodsListData.data;
	})
</script>

<style scoped lang="scss">
	uni-page-body {
		min-height: 100%;
		height: auto;
	}

	.top-banner {
		background: url(/static/images/goods.jpg);
		height: 160px;
		background-size: 100% 100%;
	}

	.news-box {
		background-color: #fff;
		padding: 10px 0;
		margin-top: 10px;

		.news {

			height: 30px;
			padding: 0 13px;
			background-color: var(--view-op-point-four);
			margin: 0 15px;
			border-radius: 30px;

			.notice-img {
				width: 58px;
				height: 20px;
				line-height: 14px;
				border-right: 0.5px solid #ddd;
				padding-right: 11px;
				box-sizing: initial;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-box {
				width: 200px;
				height: 100%;
				line-height: 30px;
				overflow: hidden;

				swiper {
					height: 100%;
				}

				.news-title {
					width: 200px;
					font-size: 12px;
					line-height: 14px;
					color: #666;
				}


			}

			.arrow-right {
				color: #666;

				svg {
					width: 7px;
					height: auto;
				}
			}
		}

	}

	.jifen-title-row {
		margin: 10px;

		.title {
			display: flex;
			margin-left: 10px;
			font-weight: 700;
			font-size: 18px;
			color: #333;
		}

		.jf_huishou {
			display: flex;
			width: 92px;
			height: 32px;
			background: #ececfc;
			box-shadow: 0px 4px 18px 0px rgba(3, 45, 255, .1);
			border-radius: 12px 12px 12px 12px;
			border: 1px solid #f3f3ff;

			.icon {
				margin-top: 8px;
				margin-left: 10px;

				image {
					width: 19px;
					height: 17px;
				}
			}

			.text {
				margin-top: 6px;
				margin-left: 2px;
				font-weight: 700;
				font-size: 13px;
				color: #1218ba;
			}
		}
	}

	.product-list {
		display: flex;
		padding: 0 10px 15px 10px;
		margin-top: 10px;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
</style>